<template>
  <div class="step_05">
    <el-row :gutter="10">
      <el-col :span="5">
        <div id="stencil"></div>
      </el-col>
      <el-col :span="14">
        <div id="container"></div>
      </el-col>
      <el-col :span="5">
        <el-form :model="formData" inline>
          <el-form-item label="文字">
            <el-input v-model="formData.text" @change="textChange"></el-input>
          </el-form-item>
          <el-button @click="toJSON">toJSON</el-button>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { Graph, Shape, Node, Addon } from "@antv/x6";
export default {
  data() {
    return {
      graph: null,
      curCel: null,
      stencil: null,
      data: {},
      formData: {
        text: "",
      },
    };
  },
  methods: {
    textChange() {
      this.curCel.attr("label/text", this.formData.text);
    },
    toJSON() {
      console.log(this.graph.toJSON());
    },
    initGraph() {
      this.graph = new Graph({
        container: document.querySelector("#container"),
        height: 600,
        background: {
          color: "#fffbe6", // 设置画布背景颜色
        },
        grid: true,
      });
      this.graph.fromJSON(this.data);
    },
    initStencil() {
      this.stencil = new Addon.Stencil({
        target: this.graph,
        stencilGraphWidth: 280,
        // stencilGraphHeight: 180,
        collapsable: true,
        groups: [
          {
            title: "系统设计图",
            name: "group1",
            graphHeight: 250,
            layoutOptions: {
              columns: 1,
              marginX: 60,
            },
          },
        ],
        // layoutOptions: {
        //   columns: 1,
        //   columnWidth: 80,
        //   rowHeight: 55,
        // },
      });
      document.querySelector("#stencil").appendChild(this.stencil.container);
    },
    initStencilNodes() {
      const r1 = this.graph.createNode({
        shape: "rect",
        width: 100,
        height: 50,
        attrs: {
          label: {
            fontSize: 12,
            text: "业务节点1",
          },
        },
        data: {
          name: "zml",
        },
      });
      const r2 = this.graph.createNode({
        shape: "rect",
        width: 100,
        height: 50,
        attrs: {
          label: {
            fontSize: 12,
            text: "业务节点2",
          },
        },
        data: {
          name: "coderzml",
        },
      });
      this.stencil.load([r1, r2], "group1");
    },
    initEvent() {
      this.graph.on("cell:click", ({ cell, ...others }) => {
        console.log(others, "others");
        if (this.curCel) this.curCel.attr("body/stroke", null);
        this.curCel = cell;
        this.curCel.attr("body/stroke", "red");
        console.log(cell.getAttrs());
        console.log(cell.getData());
        let labelText = null;
        if (cell.getAttrs()?.text?.text)
          labelText = cell.getAttrs()?.text?.text;
        if (cell.getAttrs()?.label?.text)
          labelText = cell.getAttrs()?.label?.text;
        this.formData.text = labelText;
        // console.log(e, x, y, cell, view);
        // console.log(event, 'event');
      });
    },
  },
  mounted() {
    this.initGraph(); //初始化画布
    this.initStencil(); //初始化拖拽面板
    this.initStencilNodes(); //初始化拖拽面板的nodes
    this.initEvent(); //初始化事件
  },
};
</script>
<style scoped>
.step_05{
  width: 100%;
}
#stencil {
  height: 1000px;
}
#stencil >>> .x6-widget-stencil {
  width: 300px;
}
</style>